<template>
    <div class="success">
        <section class="header">
            <img src="~assets/img/car/success.png" alt="">
            <p>领取成功</p>
            <ul>
                <li>
                    兑换价格：{{info.integral}}积分
                </li>
                <li>
                    兑换时间：{{info.add_time}}
                </li>
                <li>
                    领取号码：{{info.num}}
                </li>
                <li>
                    领取状态：<span v-if="info.status == 0">未领取</span><span v-if="info.status == 1">已领取</span>
                </li>
            </ul>
        </section>
        <section>
            <h3>
                领取流程
            </h3>
            <p v-html="info.receive">
                
            </p>
        </section>
        <section class="sec-button">
            <button class="vp-btn-blue" @click="back">
                返回
            </button>
        </section>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        name:'success',

        data() {
            return {
                list: [1,2,3,4,5,6],
                info: {},
                config: {}
            }
        },

        methods: {
            back() {
                this.$router.go(-1);
            }
        },

        components:{
            
        },

        mounted() {
            if (this.$route.query.id) {
                this.axios.get('order_info', { params: {id: this.$route.query.id} }).then(data => {
                    if (data.status == 200) {
                        this.info = data.data;
                    } else {
                        this.$toast('服务器异常，请重试');
                    }
                })
            } else {
                this.$router.go(-1);
            }

            this.axios.get('integral_config').then(data => {
                if (data.status == 200) {
                    this.config = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .success {
        padding-bottom: 1.1rem;
        min-height:100vh;
        background: #F0F0F0;
        header {
            > img {
                width: 100%;
                height: 3.3rem;
            }
        }
        section {
            padding: .36rem .33rem;
            background: #fff;
            margin-top: .23rem;
            h3 {
                font-size: .32rem;
                font-weight: bold;
                margin-bottom: .3rem;
                .flex-between;
                align-items: flex-end;
                span {
                    color: @blue;
                    i {
                        font-size: .5rem;
                    }
                }
            }
            div {
                font-size: .28rem;
                color: #A5A5A5;
            }
            p {
                font-size: .26rem;
                color: #6F6F6F;
                line-height: .4rem;
            }
            .no-bold {
                font-weight: normal;
            }
        }
        .header {
            margin-top: 0;
            text-align: center;
            padding-top: 0;
            img {
                margin-top: .7rem;
            }
            > p {
                margin-bottom: .7rem;
                font-size: .32rem;
                color: #72AD24;
            }
            ul {
                font-size: .3rem;
                text-align: left;
                line-height: 1.5;
                li {
                    span {
                        color: @blue;
                    }
                }
            }
        }
        .sec-button {
            position: fixed;
            bottom: 0;
            width: 100%;
            .box-sizing;
            background: #fff;
            padding: .15rem .33rem;
            font-size: .32rem;
            .vp-btn-blue {
                width: 100%;
                background: #1E74DE;
                color: #fff;
                height: .75rem;
                font-size: .32rem;
                .bor(5px);
            }
        }
    }
</style>